<template>
  <div>
    <div class="padding"
         v-if="phoneNumber">
      <div class="text-center">
        <bmrichtext class="hd-txt">
          <bmspan class="small"
                  value="你当前的手机号码为："></bmspan>
          <bmspan class="text-primary small"
                  :value="phoneNumber"></bmspan>
          <bmspan class="small"
                  value="点击 “获取验证码” 按钮开始验证"></bmspan>
        </bmrichtext>
      </div>
    </div>

    <div class="flex-row mt-3"
         v-else>
      <input placeholder="请输入手机号码"
             type="number"
             v-model="inputPhoneNumber"
             class="input" />
    </div>

    <div class="flex-row mt-3">
      <input placeholder="请输入验证码"
             type="number"
             v-model="verifyCode"
             class="input" />
      <div class="btn"
           :class="[cutdown > 0 ? 'disabled' : '']"
           @click="postVerifyCode">
        <text class="btn-text">获取验证码</text>
        <text class="btn-text"
              v-if="cutdown > 0">({{cutdown}})</text>
      </div>
    </div>

    <vm-button text="提交"
               class="mt-3"
               :disabled="!verifyCode"
               @buttonClicked="checkVerifyCode"></vm-button>
  </div>
</template>
<script>
import VmCell from '../../components/vm-cell.vue'
import VmButton from '../../components/vm-button.vue'
import { STORAGE_USER } from '../../plugins/constant'

export default {
  components: {
    VmCell,
    VmButton
  },
  props: {},
  data() {
    return {
      user: {},
      intervalId: '',
      cutdown: 0,
      verifyCode: '',
      inputPhoneNumber: '',
      setCookie: '',
      next: '',
      title: '验证手机号码'
    }
  },
  computed: {
    phoneNumber() { return this.user.phoneNumber },
    usePhoneNumber() { return this.phoneNumber || this.inputPhoneNumber }
  },
  watch: {},
  created() {
    this.getParams()
  },
  mounted() { },
  methods: {
    async getParams() {
      const res = await this.$router.getParams()
      this.next = res && res.next || ''
      this.title = res && res.title || '验证手机号码'

      this.$navigator.setNavigationInfo({
        title: this.title,
        navShow: true,
        statusBarStyle: 'LightContent'
      })

      this.getUser()
    },
    getUser() {
      this.user = this.$storage.getSync(STORAGE_USER) || {}
    },
    postVerifyCode() {
      if (this.cutdown > 0) {
        return this.$notice.toast({ message: '操作太快' })
      }
      if (!this.usePhoneNumber) {
        return this.$notice.toast({ message: '请输入手机号码！' })
      }
      this.$http({
        method: 'POST',
        name: 'auth.user.verifycode',
        params: {
          phoneNumber: this.usePhoneNumber
        },
        errorMsg: '获取验证码失败，请重新获取'
      }).then(res => {
        this.startCutdown()
        this.$notice.toast({ message: '发送验证码成功，请稍后查看您的手机短信' })
      })
    },
    checkVerifyCode() {
      if (!this.verifyCode) {
        return this.$notice.toast({ message: '请输入验证码' })
      }
      this.$http({
        method: 'GET',
        name: 'auth.user.verifycheck',
        data: {
          verifyCode: `${this.usePhoneNumber}${this.verifyCode}`
        },
        errorMsg: '验证失败'
      }).then(res => {
        if (+res === 0) {
          this.$notice.toast({ message: '验证码不正确!' })
        } else {
          if (this.next) {
            this.$nav.open({
              name: this.next,
              params: {
                phoneNumber: this.usePhoneNumber,
                verifyCode: this.verifyCode
              }
            })
            this.$router.finish()
          } else {
            this.$notice.toast({ message: '验证成功' })
            this.$router.back()
          }
        }
      })
    },
    startCutdown() {
      this.cutdown = 60
      this.intervalId = setInterval(() => {
        this.cutdown--
        if (this.cutdown < 1) {
          clearInterval(this.intervalId)
        }
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";
.padding {
  padding: 30px;
}
.hd-txt {
  color: #999;
  font-size: 28px;
  text-align: center;
}
.text-primary {
  color: $primary;
}
.text-center {
  align-items: center;
}
.flex-row {
  flex-direction: row;
  align-items: stretch;
  background-color: #fff;
}
.mt-3 {
  margin-top: 30px;
}
.mb-3 {
  margin-bottom: 30px;
}
.small {
  font-size: 28px;
}
.input {
  padding: 30px;
  flex: 1;
  align-items: center;
  tint-color: #999;
}
.btn {
  flex-direction: row;
  padding: 30px;
  background-color: $primary;
}
.disabled {
  background-color: lighten($primary, 20%);
}
.btn-text {
  text-align: center;
  color: #fff;
}
</style>
